import React, {memo, useRef, useState} from "react";
import {message} from "antd";
import {useDispatch, useSelector} from "react-redux";

import {deepClone, generateUUID, getRandomColor} from "../../../../common/utils";
import {useDebounce} from "../../../../common/myHooks";
import Title from "../../../../components/Title/Title";

export default memo(function PlateTargets(props) {
  const {wells, setWells, group, setGroup} = props;
  const groupColorInput = useRef();  //  group颜色选择器
  const [groupIndex, setGroupIndex] = useState(0);  //  选择的group的索引
  const {isCN} = useSelector(state => ({
    isCN: state.languageReducer.isCN
  }))

  let cloneWells = [];
  let cloneGroup = [];

  //  增加一个Group
  function addGroup() {
    cloneGroup = deepClone(group, cloneGroup);
    cloneGroup.push({
      uuid: generateUUID(),
      opt: false,
      name: "",
      color: getRandomColor(),
      comments: ""
    });
    setGroup(cloneGroup);
  }

  //  删除一个Group
  function removeGroup(indey) {
    cloneWells = deepClone(wells, cloneWells);
    cloneGroup = deepClone(group, cloneGroup);
    cloneWells.forEach(well => well.groupUuid === cloneGroup[indey].uuid && ([well.groupName, well.groupColor] = ["", ""]));
    cloneGroup.splice(indey, 1);
    setWells(cloneWells);
    setGroup(cloneGroup);
  }

  //  选择Group后的操作
  function selectGroupOperation(indey) {
    cloneGroup = deepClone(group, cloneGroup);
    if (!cloneGroup[indey].name) {  //  没有设置name
      return message.warn("Please enter group name.");
    }
    if (cloneGroup.some((item, i, arr) => i !== indey && item.name === arr[indey].name)) {
      cloneGroup[indey].name = "";
      setGroup(cloneGroup);
      return message.warn("Rename the group name.");
    }
    cloneWells = deepClone(wells, cloneWells);
    if (cloneGroup[indey].opt) { //  取消选中well的sample
      cloneGroup[indey].opt = false;
      cloneWells.forEach(well => well.selected && ([well.groupName, well.groupColor] = ["", ""]));
    } else {  //  增加选中well的sample
      if (cloneWells.some(item => item.selected && item.groupName)) { //  well中已经有1个sample时提示不能超过1个
        return message.warn("Well can't have more than one group.");
      }
      cloneGroup[indey].opt = true;
      cloneWells.forEach(well => well.selected && ([well.groupName, well.groupColor, well.groupUuid] = [cloneGroup[indey].name, cloneGroup[indey].color, cloneGroup[indey].uuid]));
    }
    setGroup(cloneGroup);
    setWells(cloneWells);
  }

  //  显示Group颜色板
  function showGroupColorSetting(indey) {
    setGroupIndex(indey);
    groupColorInput.current.click();
  }

  //  改变Group颜色
  const changeGroupColor = useDebounce(value => {
    cloneGroup = deepClone(group, cloneGroup);
    cloneGroup[groupIndex].color = value;
    setGroup(cloneGroup);
  }, 500);

  //  改变Group
  function changeGroup(value, indey, type) {
    cloneGroup = deepClone(group, cloneGroup);
    cloneWells = deepClone(wells, cloneWells);
    cloneWells.forEach(well => well.groupName && well.groupUuid === cloneGroup[indey].uuid && (well.groupName = value));
    cloneGroup[indey][type] = value;
    setGroup(cloneGroup);
    setWells(cloneWells);
  }

  return (
    <div className="platePageGroup platePageOperation">
      <Title name={isCN ? "生 物 群 组" : "Biological Group"} btn={isCN ? "添加" : "Add"} btnAction={addGroup}/>
      <ul>
        <li>{isCN ? "选项" : "Opt"}</li>
        <li>{isCN ? "群组名称" : "Group Name"}</li>
        <li>{isCN ? "颜色" : "Color"}</li>
        <li>{isCN ? "备注" : "Comments"}</li>
        <li>{isCN ? "删除" : "Del"}</li>
      </ul>
      <section className="scrollBarStyle">
        <input ref={groupColorInput} type="color" style={{display: "none"}}
               onChange={e => changeGroupColor(e.target.value)}
        />
        {
          group.map((item, index) => (
            <ul key={item.color + index}>
              <li className={item.opt ? "selectedStyle" : ""} onClick={() => selectGroupOperation(index)}/>
              <input type="text" value={item.name} onChange={e => changeGroup(e.target.value, index, "name")}/>
              <li>
                <div style={{backgroundColor: `${item.color}`}} onClick={() => showGroupColorSetting(index)}/>
              </li>
              <input type="text" value={item.comments} onChange={e => changeGroup(e.target.value, index, "comments")}/>
              <li onClick={() => removeGroup(index)}/>
            </ul>
          ))
        }
      </section>
    </div>
  );
});